<template>
    <div>
        <pt-table url="liquor" :data="tableLiquor" ref="tableRef"></pt-table>
        <pt-form url="liquor" :rules="formRule" type="dialog" ref="formRef"></pt-form>
    </div>
</template>

<script lang="ts" setup>
import type { IFormConfig } from '@pangtou/form'
import type { ITable } from '@pangtou/table'
import { onMounted, ref } from 'vue'

const tableRef = ref()
const formRef = ref()

onMounted(() => {
    tableRef.value.action.setFormRef(formRef)
})

const options = [
    { label: '国醇·唐', value: 5, type: 'success' },
    { label: '国醇·汉', value: 6, type: 'info' },
    { label: '国醇·秦', value: 7, type: 'warning' },
    { label: '国醇·红酒', value: 8, type: 'danger' },
    { label: '国醇·敦煌', value: 9, type: 'info' },
    { label: '国醇·定制', value: 10, type: 'success' },
]

const tableLiquor: ITable = {
    header: {
        buttons: ['add', 'del', 'refresh', 'extend'],
        searchExtend: false,
    },
    column: [
        { type: 'index' },
        { prop: 'title', label: '品名' },
        { prop: 'vol', label: '酒精度' },
        { prop: 'spec', label: '规格' },
        { prop: 'category_id', label: '分类', render: 'tag', renderExtend: options },
        { prop: 'photo', label: '产品图片', render: 'image' },
        { label: '操作', width: '130', fixed: 'right', buttons: ['edit', 'del'] },
    ],
}

const formRule: IFormConfig = {
    title: '产品中心',
    col: 24,
    rules: [
        { field: 'title', col: 12, label: '品名', required: true },
        {
            field: 'category_id',
            label: '产品分类',
            type: 'select',
            col: 12,
            required: true,
            options: options,
        },
        { field: 'vol', col: 12, label: '酒精度', required: true },
        { field: 'spec', col: 12, label: '规格', required: true },
        { field: 'type', col: 12, label: '类型', required: true, value: '酱香型白酒' },
        { field: 'photo', col: 12, label: '产品图片', type: 'image', required: true },
        { field: 'intro', label: '产品介绍', type: 'textarea' },
        { field: 'content', type: 'rich_text', label: '产品内容', required: true },
    ],
}
</script>

<style scoped lang="scss"></style>
